<template>
  <div class="personal_page">
      <div class="personal_top"></div>
      <div class="mingpian">
          <div class="jieshao">{{dataArr.remark}}</div>
          <div class="info">
              <div class="l"><span>姓名</span> {{dataArr.nickName}}</div>
              <div class="r"><span>联系方式</span> {{dataArr.phone}}</div>
          </div>
      </div>
        <!-- 头像 -->
        <div class="tarver">
            <img :src="require('../assets/images/personal/touxiang.png')" alt="">
        </div>

        <!-- 列表list -->
      <ul>
          <li @click="gotoPersonal">
              <p>个人信息</p>
              <p>></p>
          </li>
             <li>
              <p>支付中心</p>
              <p>></p>
          </li>
             <li>
              <p>修改密码</p>
              <p>></p>
          </li>
             <li @click="gotoVersion">
              <p>版本信息</p>
              <p>></p>
          </li>
            <li>
              <p>清除缓存</p>
              <p>></p>
          </li>
      </ul>

      <!-- 退出登录 -->
      <div class="btn" @click="hdClick">
          退出登录
      </div>

        <!-- 模态框 -->
        <div class="motai" v-show="isShow">
            <div class="bg"></div>
            <div class="content">
                <div class="top">是否退出登录</div>
                <div class="down">
                    <p @click="cancel">取消</p>
                    <p @click="back">确定</p>
                </div>
            </div>
        </div>


  </div>
</template>

<script>
import {userInfoApi} from '../request/api'
export default {
    data(){
        return {
            isShow:false,
            dataArr:{},
        }
    },
    created(){
        userInfoApi().then(res=>{

            // console.log(res);
            this.dataArr = res.data;
        })
    },
    methods:{
        gotoPersonal(){
            this.$router.push('/personalinfo')
        },
        gotoVersion(){
            this.$router.push('/versioninfo')
        },
        hdClick(){
            this.isShow = true;
        },
        cancel(){
            this.isShow = false;
        },
        back(){
               this.$toast.loading('正在退出');
           setTimeout(()=>{
                this.$router.push('/login')
           },1500)

           
        }
    }

}
</script>

<style lang="less" scoped>
.personal_top{
    width: 100%;
    height: 139px;
    background-color: #204ca3;
}

.personal_page{
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
}

.mingpian{
    overflow: hidden;
    width: 346px;
    height: 145px;
    background-color: #fff;
    position: fixed;
    left: 15px;
    top: 80px;
    border-radius: 4px;
    .jieshao{
      margin-top: 56px;
      line-height: 37px;
      line-height: 37px;
        text-align: center;
         color: #989898;
    }
   .info{
       display: flex;
       height: 48px;
       line-height: 48px;
       justify-content: space-between;
       padding: 0 16px;
       span{
           color: #989898;
       }
   }
}

.tarver{
    width: 86px;
    height: 86px;
    // background-color: red;
    position: fixed;
    top: 33px;
    left: 143px;
    border-radius: 50%;
    img{
        width: 100%;
    }
}

ul{
    
    margin:0 15px;
    margin-top: 99px;
    background-color: #fff;
    li{
        display: flex;
        justify-content: space-between;
        height: 45px;
        line-height: 45px;
        padding: 0 13px;
        box-sizing: border-box;
        border-bottom: 1px solid #e5e5e5;
         
    }
}

.btn{
    width: 347px;
    height: 44px;
    background-color: #e9e9e9;
    margin: auto;
    margin-top: 69px;
    line-height: 44px;
    text-align: center;
}

.motai{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    .bg{
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        }
    .content{
        width: 258px;
        height: 126px;
        background-color: #fff;
        position: absolute;
        top: 255px;
        left: 57px;
        .top{
            font-weight: 700;
            width: 100%;
            height: 79px;
            line-height: 79px;
            text-align: center;
            border-bottom: 1px solid #e5e5e5;
        }
        .down{
            display: flex;
            justify-content: space-between;
            p{
                width: 50%;
                height: 45px;
                line-height: 45px;
                text-align: center;
                &:nth-of-type(1){
                    border-right: 1px solid #e5e5e5;
                }
                   &:nth-of-type(2){
                  color: #4287ff;
                    
                }
            }
        }

    }
}
</style>